<template >
  <div class="sign-modal-box">
    <comm-table
      ref="table"
      :columns="columns"
      :pagination="true"
      :condition="condition"
      :pageSize="5"
      url="/v1/zl/search"
    >
      >
      <template v-slot:expand="{ row }">
        <comm-table ref="table" :columns="detailColumns" :pagination="true" :condition="{
            flowid: {
              value: id,
              op: '='
            },
            zlid: {
              value: row.id,
              op: '='
            },
            query_qx:{
              value: 'ALL',
              op: '='
            },
             zlly:{
               value: '1',
              op: '='
            }
          }"
          :pageSize="5"
          url="/v1/zl/searchJs">
          <template v-slot:expand="{ row }">
            {{ row.yyxtmc }}
          </template>
        </comm-table>
      </template>
    </comm-table>
  </div>
</template>
<script>
import { BM_DEPT, BM_FKZT, BM_ZLLX } from '@/common/codeDic';
export default {
  name: 'SignModal',
  props: {
    id: {
      type: String
    }
  },
  data() {
    return {
      columns: [
        { type: 'expand', label: ' ', width: 20 },
        { type: 'index', label: '序号', width: 70 },
        { prop: 'zllx', label: '指令', code: BM_ZLLX },
        {
          prop: 'qsh',
          label: '反馈情况',
          render: (h, row) =>
            h('div', {}, [
              h('span', {}, `已反馈${row.fkdwsl || 0}`),
              h('el-divider', { attrs: { direction: 'vertical' } }),
              h('span', {}, `未反馈${parseInt(row.jsdwsl) - parseInt(row.fkdwsl) || 0}`)
            ])
        },
        { prop: 'sxrq', label: '反馈时间' }
      ],
      detailColumns: [
        { type: 'index', label: '序号', width: 70 },
        { prop: 'fkdwdm', label: '所属单位', code: BM_DEPT },
        { prop: 'fkrxm', label: '反馈人' },
        { prop: 'fkzt', label: '状态', code: BM_FKZT },
        { prop: 'fksj', label: '反馈时间' }
      ]
    };
  },
  computed: {
    condition() {
      return {
        flowid: {
          value: this.id,
          op: '='
        },
        query_tjxx: {
          value: 'true',
          op: '='
        }
      };
    }
  }
};
</script>
<style scoped lang="scss">
.sign-modal-box {
  /deep/.expanded {
    background: #eff6ff;
  }
  /deep/.el-table__expanded-cell {
    padding: 0 50px;
  }
}
</style>
